$colorOrange: #ff8f3f;
$colorWhite: #FFFFFF;
$colorFont: #555555;
$colorRed: #ff0000;
$colorGray: #f6f6f6;
$colorPink: #f8b8ce;
$colorBlack: #000000;
$colorGreen: #8BC34A;

$minBodyWidth: 1200px;
$leftWidth: 60px;

$borderColor: #e6e6e6;
$bodyBackground: $colorWhite;

.ant-collapse-item {
  .ant-collapse-header {
    background: #ecf6fd;
    border-bottom: 1px solid #e2f3fd;
    user-select: none;

    .add-button {
      float: right;
      margin: 7px 20px 0 0;
      font-weight: bolder;
    }
  }

  .ant-collapse-header:hover {
    background: #e4f5ff !important;
  }
}

.ant-collapse-item.disable-open {
  .ant-collapse-header {
    background: #fefcfc;
    border-color: #f8e9e4;
    cursor: not-allowed !important;

    * {
      color: #bbbbbb !important;
    }
  }

  .ant-collapse-header:hover {
    background: #fefcfc !important;
  }
}

.color-success {
  color: $colorGreen;
}

.color-fail {
  color: $colorRed;
}

.float-right {
  float: right;
}

.float-left {
  float: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.clear-both {
  clear: both;
}

.word-break {
  word-break: break-all;
  white-space: normal;
}

.search-form {
  padding: 24px;
  background: #fbfbfb;
  border: 1px solid $borderColor;
  border-radius: 6px;
  margin-bottom:  20px;

  .button-col {
    text-align: right;
  }

  button + button,
  .ant-btn-group + button {
    margin-left: 10px;
  }
}

.search-form.search-form-single-line {
  .ant-form-item {
    margin-bottom: 0;
  }
}


.loading-placeholder {
  padding: 40px 0;
  width: 100%;
  min-height: 30px;
  text-align: center;
  font-size: 18px;
  color: #999999;
}

.custom-tags {
  word-break: break-all;
  white-space: normal;

  .ant-tag {
    margin: 20px 30px 20px 0;

    height: 36px;
    line-height: 36px;
    border: 0;
    user-select: none;

    .ant-tag-text {
      margin-left: 10px;
    }
  }

  .ant-tag.forbidden-tag {
    background: #f7f7f7;
    color: #cccccc;
    cursor: not-allowed;
  }

  .ant-tag-checkable {
    padding: 0 15px;
  }

  .ant-tag-checkable:not(.ant-tag-checkable-checked) {
    background: #f1f1f1;
    color: #555555;
  }
}

.custom-tags.no-click {
  .ant-tag {
    cursor: default;
  }
}

.row {
  margin-top: 20px;
  margin-bottom: 20px;
}



/* Modal.wrapClassName="" */
.vertical-center-modal {
  text-align: center;
  white-space: nowrap;
}

.vertical-center-modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
}

.vertical-center-modal .ant-modal {
  display: inline-block;
  vertical-align: middle;
  top: 0;
  text-align: left;
}


.table-prefix-operation {
  margin-bottom: 20px;
}

.ant-table {
  button + button {
    margin-left: 15px;
  }

  .ant-table-content {
    background: $colorWhite;
  }
}


.scroll-bar {
  width: auto !important;
  height: auto !important;
  position: fixed !important;
  overflow: hidden !important;
  box-sizing: content-box;
  background: $colorWhite;

  > div:first-of-type > .panel-content {
    word-break: break-all;
    overflow: hidden;

    .ant-menu {
      overflow: hidden;
    }
  }

  > div:last-of-type {
    z-index: 100;
  }
}

.ant-btn-danger {
  color: #fff;
  background-color: #f04134;
  border-color: #f04134;

  &:hover {
    background-color: #f46e65;
    border-color: #f46e65;
  }
}

.dynamic-delete-button {
  &:hover {
    color: #777;
  }

  cursor: pointer;
  position: relative;
  top: 4px;
  font-size: 24px;
  color: #999;
  transition: all .3s;
}

.property-row-required {
    background-color: #FFF9C4;
}

.wrap-normal {
  white-space: normal;
}

.wrap-pre-wrap {
  white-space: pre-wrap;
}

.ant-tabs-nav {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  .ant-tabs-tab {
    .anticon {
      margin-right: 4px !important;
    }
  }
}

.line-height-2 {
  line-height: 2;
}

.mg-l-10 {
  margin-left: 10px;
}

.pd-10 {
  padding: 10px;
}

.pd-t-10 {
  padding-top: 10px;
}

.pd-b-10 {
  padding-bottom: 10px;
}

.ant-dropdown-menu {
  i {
    margin-right: 5px;
  }
}

.max-width-80 {
  max-width: 80%;
}

.hvr-rotate {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-rotate:hover, .hvr-rotate:focus, .hvr-rotate:active {
  -webkit-transform: rotate(4deg);
  transform: rotate(4deg);
}
